@extends('base')
@section('style')
    <style type="text/css">
        @if('zh_cn' == Cookie::get('lang'))
        .title{text-align: left;text-indent: 2.6em !important;}
        @endif
        .gallery-item {
            margin-bottom: 10px;
            display: block;
            position: relative;
        }

        img {
            max-width: 100%;
            height: auto;
            border: 0;
        }

        img {
            vertical-align: middle;
        }

        .gallery-item span {
            width: 16px;
            height: 16px;
            background: url('/images/sprite.png') no-repeat -16px -40px;
            font-size: 0px;
            border: 0px;
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="/css/animate.css" type='text/css' media='all'/>
    <link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-1.3.7.css?ver=1.5.7" type='text/css' media='all'/>
@stop
@section('content')
    <ul class="footprint">
        <li><a href="#">{{trans('base.HOME')}}</a></li>
        <li><a href="#">&gt;&gt;</a></li>
        <li><a href="#">{{trans('base.PRODUCTS')}}</a></li>
        @if(isset($class['pk']))
            <li><a href="#">&gt;&gt;</a></li>
            <li><a href="#">{{$class['pk']}}</a></li>
        @endif
        @if(isset($class['ck']))
            <li><a href="#">&gt;&gt;</a></li>
            <li><a href="#">{{$class['ck']}}</a></li>
        @endif
    </ul>
    <div class="contant mttop">
        <div class="fl">
            <h2 class="title yin_font2">{{trans('base.PRODUCTS')}}</h2>
            <div class="left_nav">
                <ul class="productGroup">
                    @foreach($types as $key=>$type)
                        <li><a class="type_show" id="p_a_{{$key}}" href="{{url('product/index/?pk='.$key)}}">{{$type['name']}}</a>
                            @if([] != $type['data'])
                                <ul class="product_nav" style="display: none">
                                    @foreach($type['data'] as $datakey=>$data)
                                        <li><a id="c_a_{{$datakey}}" href="{{url('product/index/?pk='.$key.'&ck='.$datakey)}}"
                                               @if($typeShow == $datakey) class="pro_nav_ative" @endif>{{$data}}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="contact_right">
            <dl class="pro_show">
                {{--{{print_r($pics)}}--}}
                <dt>
                    <a href="{{asset($pics[0]->imgUrl)}}" class="gallery-item fancybox image">
                        <img name="bigpic" width="470px" height="650px" src="{{asset($pics[0]->imgUrl)}}"/>
                        <span></span>
                    </a>
                </dt>
                @foreach($pics as $key => $pic)
                    <dd>
                        <a href="javascript:void(0);">
                            <img name="smallpic" width="136px" height="136px" src="{{asset($pic->imgUrl)}}"/>
                        </a>
                    </dd>
                @endforeach
            </dl>
            <p class="pro_show_p">{{"zh_cn" == $lang ? $product->description_cn : $product->description}}</p>
            <p class="pro_show_btn">
                <a href="{{asset('/product/index/?pk='.$product->parent_id)}}">&laquo;{{trans('base.BackToTheList')}}</a>
            </p>
            @if(count($recommends))
                <div class="recommend">
                    <h2 class="recommend_tit yin_font1"> {{trans('base.Recommend')}}</h2>
                    <ul>
                        @foreach($recommends as $recommend)
                            <li>
                                <a href="{{url('/product/detail/'.$recommend->id)}}">
                                    <?php $pic = explode(',', $recommend->pic)[0] ?>
                                    <img src="{{asset('img/type-'.$pic.'/180-180"')}}"/>
                                    <p>{{"zh_cn" == $lang ? $recommend->name_cn : $recommend->name}}</p>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
        {{--<div class="clear"></div>--}}

    </div>
@stop
@section('js')
    <script src="{{asset('js/jquery.fancybox-1.3.7.js?ver=1.5.7')}}"></script>
    <script src="{{asset("js/jquery-viewportchecker.js")}}"></script>
    <script src="{{asset('js/jquery.mousewheel.min.js?ver=3.1.12')}}"></script>
    <script src="{{asset('js/jquery.unveil.min.js?ver=4.3.5')}}"></script>
    <script src="{{asset('js/jquery-viewportchecker.js')}}"></script>
    <script src="{{asset('js/jquery-cookie.js')}}"></script>
    {{--<script src="{{asset('js/jquery.fancybox-1.3.1.pack.js')}}"></script>--}}
    <script type="text/javascript">

        var fb_timeout = null;
        var fb_opts = {
            'overlayShow': true,
            'hideOnOverlayClick': true,
            'showCloseButton': true,
            'centerOnScroll': true,
            'enableEscapeButton': true,
            'autoScale': true
        };
        //定义一个事件
        var easy_fancybox_handler = function () {
            /* IMG */
            //选择器
            var fb_IMG_select = 'a[href*=".jpg"]:not(.nofancybox,.pin-it-button):has(img), area[href*=".jpg"]:not(.nofancybox):has(img), a[href*=".jpeg"]:not(.nofancybox,.pin-it-button):has(img), area[href*=".jpeg"]:not(.nofancybox):has(img), a[href*=".png"]:not(.nofancybox,.pin-it-button):has(img), area[href*=".png"]:not(.nofancybox):has(img)';
            //添加样式类
            jQuery(fb_IMG_select).addClass('fancybox image').attr('rel', 'gallery');
            //调用fancybox函数
            jQuery('a.fancybox, area.fancybox, li.fancybox a:not(li.nofancybox a)').fancybox(jQuery.extend({}, fb_opts, {
                'transitionIn': 'elastic',
                'easingIn': 'linear',
                'transitionOut': 'elastic',
                'easingOut': 'linear',
                'opacity': false,
                'hideOnContentClick': false,
                'titleShow': false,
                'titlePosition': 'over',
                'titleFromAlt': true,
                'showNavArrows': true,
                'enableKeyboardNav': true,
                'cyclic': false
            }));
            /* Auto-click */
            jQuery('#fancybox-auto').trigger('click');
        }
        jQuery(document).on('ready post-load', easy_fancybox_handler);


        $(function () {
            $('.pro_nav_ative').parent().parent().show();
            $('.productGroup').find('.type_show').on('click', function () {
                $(this).next().slideToggle(200);
                $(this).parent().sibling().find('li ul').slideUp(200);
            });

            $("img[name=smallpic]").on("click",function(){
                var src = $(this).attr('src');
                $("img[name=bigpic]").attr('src', src);
                $("img[name=bigpic]").parent().attr('href', src);
            });

        })
    </script>
@stop